<template>
  <!-- 员工实名认证审核 -->
  <div>
    <!-- 头部操作 -->
    <el-row :gutter="10">
      <!-- 日期 -->
      <el-col :span="8">
        <el-date-picker
          v-model="dateValue"
          type="datetimerange"
          :picker-options="pickerOptions"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          align="right"
          value-format="timestamp"
        />
      </el-col>
      <!-- 选择器 -->
      <el-col :span="4">
        <el-select
          v-model="params.status"
          clearable
          placeholder="请选择状态"
          @clear="params.status = null"
        >
          <el-option
            v-for="item in options"
            :key="item.id"
            :label="item.value"
            :value="item.value"
          />
        </el-select>
      </el-col>
      <!-- 第三个输入框 -->
      <el-col :span="4">
        <el-input v-model="params.userId" placeholder="申请人编号" clearable />
      </el-col>
      <!-- 查询按钮 -->
      <el-col :span="2">
        <el-button type="primary" @click="queryInfo">查询</el-button>
      </el-col>
    </el-row>
    <!-- 表格 -->
    <el-table :data="tableData" style="width: 100%">
      <el-table-column
        label="序号"
        type="index"
        align="center"
        header-align="center"
      />
      <el-table-column
        prop="userId"
        label="申请人编号"
        align="center"
        header-align="center"
      />
      <el-table-column
        prop="realname"
        label="姓名"
        align="center"
        header-align="center"
      />
      <el-table-column
        prop="applyTime"
        label="申请时间"
        align="center"
        header-align="center"
        :formatter="fmtTableDateDay"
      />
      <el-table-column
        prop="idCard"
        label="身份证号"
        align="center"
        width="300"
        header-align="center"
      />
      <el-table-column
        prop="idcardPhotoPositive"
        label="身份证正面"
        align="center"
        header-align="center"
      >
        <template #default="scope">
          <el-popover placement="right" trigger="hover">
            <el-image
              class="img__hoverImg"
              fit="contain"
              :src="scope.row.idcardPhotoPositive"
            />
            <el-image
              slot="reference"
              class="img__innerImg"
              fit="contain"
              :src="scope.row.idcardPhotoPositive"
            />
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column
        prop="idcardPhotoNegative"
        label="身份证反面"
        align="center"
        header-align="center"
      >
        <template #default="scope">
          <el-popover placement="right" trigger="hover">
            <el-image
              class="img__hoverImg"
              fit="contain"
              :src="scope.row.idcardPhotoNegative"
            />
            <el-image
              slot="reference"
              class="img__innerImg"
              fit="contain"
              :src="scope.row.idcardPhotoNegative"
            />
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column
        prop="bankCard"
        label="银行卡号"
        align="center"
        width="200"
        header-align="center"
      />
      <el-table-column
        prop="bankCardPhoto"
        label="银行卡"
        align="center"
        header-align="center"
      >
        <template #default="scope">
          <el-popover placement="right" trigger="hover">
            <el-image
              class="img__hoverImg"
              fit="contain"
              :src="scope.row.bankCardPhoto"
            />
            <el-image
              slot="reference"
              class="img__innerImg"
              fit="contain"
              :src="scope.row.bankCardPhoto"
            />
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column
        prop="status"
        label="状态"
        align="center"
        header-align="center"
      >
        <template #default="scope">
          <el-tag
            :type="
              scope.row.status === '通过'
                ? 'success'
                : scope.row.status === '不通过'
                ? 'danger'
                : 'info'
            "
            >{{ scope.row.status }}</el-tag
          >
        </template>
      </el-table-column>
      <el-table-column label="操作" width="100">
        <template v-if="scope.row.status === '未审核'" slot-scope="scope">
          <el-button
            type="text"
            style="color: #409eff"
            @click="toPass(scope.row.id)"
            >通过</el-button
          >
          <el-button
            type="text"
            style="color: #f56c6c"
            @click="toNoPass(scope.row.id)"
            >不通过</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination
      class="pagination_right"
      :current-page="params.page"
      :page-sizes="[3, 5, 10, 20]"
      :page-size="params.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script>
import { fmtTableDateDay } from "@/filters/index";
import {
  pageQueryCertificationApply,
  checkPass,
  checkNoPass,
} from "@/api/certification";
export default {
  data() {
    return {
      fmtTableDateDay,
      // 参数
      params: {
        page: 1,
        pageSize: 10,
        status: null,
        userId: null,
        beginTime: null,
        endTime: null,
      },
      // 表格数据
      tableData: [],
      // 表格数据数量
      total: 0,
      // 选择器的选项
      options: [
        {
          id: 1,
          value: "通过",
        },
        {
          id: 2,
          value: "不通过",
        },
        {
          id: 3,
          value: "未审核",
        },
      ],
      // 时间选择器的配置
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      // 时间选择器里的值
      dateValue: null,
    };
  },
  computed: {},
  created() {
    this.getData();
  },
  mounted() {},
  methods: {
    // 获取数据
    async getData() {
      const res = await pageQueryCertificationApply({ ...this.params });
      if (res.status !== 200) return this.$message.error("数据获取失败");
      this.tableData = res.data.list;
      this.total = res.data.total;
    },
    // 审核通过
    async toPass(id) {
      const res = await checkPass({ id: id });
      if (res.status !== 200) return this.$message.info("操作失败");
      this.$message.success("审核通过");
    },
    // 审核不通过
    async toNoPass(id) {
      const res = await checkNoPass({ id: id });
      if (res.status !== 200) return this.$message.info("操作失败");
      this.$message.error("审核不通过");
    },
    // 改变页面数据数量大小
    handleSizeChange(newPageSize) {
      this.params.pageSize = newPageSize;
      this.getData();
    },
    // 改变页码
    handleCurrentChange(newPage) {
      this.params.page = newPage;
      this.getData();
    },
    // 点击查询按钮筛选数据
    queryInfo() {
      if (!this.dateValue) {
        this.params.beginTime = this.params.endTime = null;
      } else {
        this.params.beginTime = this.dateValue[0];
        this.params.endTime = this.dateValue[1];
      }
      this.params.page = 1;
      // console.log(this.params);
      this.getData();
    },
  },
};
</script>
<style scoped>
.img__innerImg {
  width: 30px;
  height: 30px;
}
.img__hoverImg {
  width: 180px;
  height: 120px;
}
.pagination_right {
  float: right;
  margin-top: 8px;
}
</style>
